<template>
    <div class="home">
      <!-- 头部排序控制部分保持不变 -->
      <div class="header" v-if="sort">
        <!-- 原有header内容 -->
      </div>
  
      <div class="grid-box">
        <!-- 左侧区域 -->
        <div class="left-box">
          <draggable
            class="grid-container"
            handle=".handle"
            v-model="grid1List"
            item-key="type"
            animation="300"
            chosen-class="chosen"
            group="people"
            @change="draggableChange"
          >
            <template #item="{ element }">
                <GridItem 
                    :element="element" 
                    :sort="sort" 
                    location="grid1"
                    @delete="delGrid1ListItem"
                    @toggle="handleToggleItem"
                />
            </template>
          </draggable>
        </div>
  
        <!-- 右侧区域 -->
        <div class="right-box">
          <draggable
            class="grid-container"
            handle=".handle"
            v-model="grid2List"
            item-key="type"
            animation="300"
            chosen-class="chosen"
            group="people"
            @change="draggableChange"
          >
            <template #item="{ element }">
              <GridItem 
                :element="element" 
                :sort="sort" 
                location="grid2"
                @delete="delGrid2ListItem"
                @toggle="updateGridList(2)"
              />
            </template>
          </draggable>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed, ref, onMounted, onBeforeUnmount } from "vue";
  import draggable from "vuedraggable";
  import GridItem from "@/components/Index/GridItem.vue"; // 新提取的组件
  import { useI18n } from "vue-i18n";
  import { useGlobalStore } from "@/stores/modules/global";
  
  const { t } = useI18n();
  const globalStore = useGlobalStore();
  
  // 状态管理
  const sort = computed(() => globalStore.sort);
  const grid1List = ref<any[]>([]);
  const grid2List = ref<any[]>([]);
  
  // 初始化网格数据
  const initializeGridData = () => {
    const savedGrid1 = localStorage.getItem("grid1List");
    const savedGrid2 = localStorage.getItem("grid2List");
    
    if (savedGrid1 && savedGrid2) {
      grid1List.value = JSON.parse(savedGrid1);
      grid2List.value = JSON.parse(savedGrid2);
    } else {
      grid1List.value = globalStore.gridList.slice(0, 3);
      grid2List.value = globalStore.gridList.slice(3, 8);
    }
  };
  
  // 计算可添加的模块
  const dataArr = computed(() => {
    const types = [...grid1List.value, ...grid2List.value].map(item => item.type);
    return globalStore.gridList.filter(item => !types.includes(item.type));
  });
  
  // 操作方法
  const chooseItem = (item: any) => {
    grid1List.value = [item, ...grid1List.value];
  };
  
  const delGrid1ListItem = (item: any) => {
    const index = grid1List.value.findIndex(vo => vo.type === item.type);
    if (index !== -1) grid1List.value.splice(index, 1);
  };
  
  const delGrid2ListItem = (item: any) => {
    const index = grid2List.value.findIndex(vo => vo.type === item.type);
    if (index !== -1) grid2List.value.splice(index, 1);
  };
  
  const onFinish = () => {
    globalStore.setSort(false);
    saveGridData();
  };
  
  const updateGridList = (number: number) => {
    setTimeout(() => {
      saveGridData();
    }, 100);
  };
  
  // 保存网格数据
  const saveGridData = () => {
    localStorage.setItem("grid1List", JSON.stringify(grid1List.value));
    localStorage.setItem("grid2List", JSON.stringify(grid2List.value));
  };
  
  // 拖拽相关
  let timer: ReturnType<typeof setTimeout>;
  const draggableChange = () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      if (!sort.value) {
        saveGridData();
      }
    }, 100);
  };
  
  // 生命周期
  onMounted(initializeGridData);
  onBeforeUnmount(() => {
    clearTimeout(timer);
  });
  // 在父组件中修改toggle处理逻辑
const handleToggleItem = ({ type, show, location }: { type: string; show: boolean; location: string }) => {
  const targetList = location === 'grid1' ? grid1List : grid2List;
  const item = targetList.value.find(item => item.type === type);
  if (item) {
    item.show = show;
    updateGridList(location === 'grid1' ? 1 : 2);
  }
};
  </script>
  
  <style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  .tip_sort_box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 332px;
    height: 44px;
    padding: 0 16px;
    margin-left: 15px;
    font-size: 14px;
    color: #ffffff;
    background: var(--el-color-primary);
    border-radius: 50px;
    .sort_finish {
      height: 30px;
      padding: 0 16px;
      margin-left: 15px;
      font-size: 14px;
      line-height: 30px;
      color: var(--el-color-primary);
      cursor: pointer;
      background-color: #ffffff;
      border-radius: 50px;
    }
  }
}
.grid-box {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;
  .left-box,
  .right-box {
    width: calc(50% - 5px);
    overflow: hidden;
  }
  .grid-container {
    width: 100%;
    min-height: 100%;
    .item {
      // min-height: 50px;
      margin-bottom: 10px;
      overflow: hidden;
      background-color: #ffffff;
      border: 1px solid #ffffff;
    }
    .chosen {
      border: 1px solid $primary-color !important;
    }
    .item-title-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      cursor: move;
      border-bottom: 1px solid #e5e4e9;
      .item-title {
        height: 44px;
        font-size: 15px;
        line-height: 44px;
      }
      .btn {
        cursor: pointer;
      }
    }
  }
}
</style>